<template>
	<view>
		<view :class="{dpn: isShowSearch}">
			<!-- 导航栏 -->
			<uni-nav-bar fixed="true">
				<block slot="left">
					<image class="top-img" src="../../static/search/6.png" mode="widthFix"></image>
				</block>
				<view class="top-search flex-box" @click="openSearch()">
					<image class="search-icon" src="../../static/search/2.png" mode="widthFix"></image>
					周杰伦
				</view>
				<block slot="right">
					<image class="top-img" src="../../static/mine/r.png" mode="widthFix"></image>
				</block>
			</uni-nav-bar>
			<view class="page-content">
				<mescroll-uni :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
					<!-- 轮播图 -->
					<view class="banner">
						<swiper :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255, 0.5)"
							indicator-active-color="#ff372b" :interval="3000" :duration="500">
							<swiper-item v-for="(item,index) in swiper" :key="index">
								<view class="item">
									<image :src="item.imageUrl" class="img" mode=""></image>
									<view class="tag">
										{{item.typeTitle}}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- //入口选择 -->
					<view class="main-bar flex-box">
						<view class="flex-item" v-for="(item,index) in contentBar" :key='index'>
							<image :src="'../../static/t_'+(index+1)+'.png'" class="img"></image>
							<view>
								{{item.name}}
							</view>
						</view>
					</view>
					
					<song-list title="推荐歌单" link="" :list="recommendsongs"></song-list>
					<!-- 新碟新歌 -->
					<view class="song-list">
						<view class="switch-line flex-box">
							<view class="flex-box">
								<view class="switch-item" :class="{on:newType==1}" @click="switchTab(1)">
									新碟
								</view>
								<view class="switch-item" :class="{on:newType==2}" @click="switchTab(2)">
									新歌
								</view>
							</view>
							<template v-if="newType==1">
								<view class="more">
									更多新碟
								</view>
							</template>
							<template v-if="newType==2">
								<view class="more">
									更多新歌
								</view>
							</template>
						</view>
						<scroll-view scroll-x="true" class="scroll-view">
							<view class="item" v-for="(item,index) in latestAlbum" :key="index">
								<image :src="item.picUrl" class="img"></image>
								<view class="desc ellipsis">
									{{item.name}}
								</view>
								<view class="desc ellipsis c9">
									{{item.artist.name}}
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- //精选视频-->
					<view class="video-list song-list">
						<view class="tit-bar">
							精选视频
							<view class="more fr">
								更多
							</view>
						</view>
						<view class="video-item" v-for="(item, index) in relatedvideo" :key="index">
							<image :src="item.cover" mode="" class="img"></image>
							<view class="desc ellipsis">
								{{item.name}}
							</view>
						</view>

					</view>
				</mescroll-uni>
			</view>
		</view>
		<search ref="search" @close="closeSearch()"/>
	</view>
</template>

<script>
	import songList from '../../components/songList.vue';
	import search from '../../components/search.vue'
	import MeScroll from '../../components/mescroll-uni/mescroll-uni';
	import {
		apigetBannber,
		apigetRecommendSongs,
		apigetTopAlbum,
		apigetRelatedVideo
	} from '../../apis/index.js';


	export default {
		components: {
			songList,
			search
		},
		data() {
			return {
				swiper: [],
				contentBar: [{
						name: '每日推荐'
					},
					{
						name: '歌单'
					},
					{
						name: '排行榜'
					},
					{
						name: '电台'
					},
					{
						name: '直播'
					},
				],
				//推荐歌单的数组数据
				recommendsongs: [],
				newType: 1, //新碟新歌类别 1-第一个 2-第二个
				latestAlbum: [], //存储新碟新歌的内容
				latestTempAlbum: [], //临时变量
				relatedvideo: [], //精选视频
				isShowSearch: false, //是否显示搜索页
				downOption: { //下拉刷新
					auto: true
				},
				upOption: { //上拉加载下一页
					auto: true,
					page: {
						num: 0, //起始页
						size: 10 //一页条数
					}
				}

			}
		},
		onLoad() {
			this.getBanner();
			this.getRecommendSongs(),
				this.getLatestAlbum(),
				this.getRelatedVideo()
		},
		onPullDownRefresh() {
			console.log("lll");
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
				openSearch() {
							//隐藏首页
							this.isShowSearch = true;
							//打开搜索页
							this.$refs.search.open();
						},
						//关闭搜索页
						closeSearch() {
							this.isShowSearch = false;
						},
			//视频列表
			getList(pageNum, pageSize) {
				const params = {
					// id: this.curNav,
					pageNum,
					pageSize
				}
				apigetRelatedVideo(params).then(res => {
					console.log(res);
					this.relatedvideo = res.data
				})
			},
			//下拉刷新回调
			downCallback(mescroll) {
				console.log("downcallback")
				//重置列表为第一页(自动执行page.num=1，再触发upcallback方法)
				mescroll.resetUpScroll();
			},
			//上拉加载回调
			upCallback(mescroll) {
				console.log("upcallback", mescroll)
				//加载下一页数据
				this.getList(mescroll.num, mescroll.size, res => {
					//若是第一页 则清空
					if (mescroll.num == 1) {
						this.allList = [];
					}
					//累加数据
					this.allList = this.allList.concat(res);
					this.splitVideoList();
					//成功的回调，隐藏刷新状态
					mescroll.endSuccess();
				}, () => {
					//失败的回调，隐藏下拉刷新状态
					mescroll.endErr();
				})
			},
			getBanner() {
				apigetBannber().then(res => {
					// console.log(res);
					this.swiper = res.banners
				})
			},
			getRecommendSongs() {
				const params = {
					limit: 6
				}
				apigetRecommendSongs(params).then(res => {
					// console.log(res);
					//格式化播放量数据
					const formatCount = data => {
						let tmp = data;
						if (data > 10000) {
							tmp = (parseInt(data / 10000) + 'w')
						}
						return tmp
					}
					this.recommendsongs = res.result
					//格式化
					this.recommendsongs.forEach(item => {
						item.playCount = formatCount(item.playCount)
					})
				})
			},
			//切换新碟新歌
			switchTab(type) {
				this.newType = type
				let temp = {
					//设定开始和结束的位置
					s: type == 1 ? 0 : 3,
					e: type == 1 ? 3 : 6
				}
				this.latestAlbum = this.latestTempAlbum.slice(temp.s, temp.e)
			},
			//新碟新歌
			getLatestAlbum() {
				apigetTopAlbum().then(res => {
					// console.log(res)
					//所有数据暂存在临时变量中
					this.latestTempAlbum = res.albums
					//取前三个做第一类的数据展示
					this.latestAlbum = res.albums.slice(0, 3)
				})
			},
			//精选视频
			getRelatedVideo() {
				// const params = {
				// 	id: 6452 //根据资源id查询
				// }
				apigetRelatedVideo().then(res => {
					// console.log(res);
					this.relatedvideo = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.dpn{
	display: none;
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}
.top-search {
	width: 400rpx;
	/* #ifdef MP-WEIXIN */
	width: 450rpx;
	margin-left:-60rpx;
	/* #endif */
	height: 72rpx;
	margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}
.banner {
	width: 100%;
	height: 268rpx;
	margin: 30rpx auto 44rpx;
	.swiper {
		height: 268rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>
	page {
		color: #1a1a1a;
		font-size: 24rpx;
	}

	.banner {
		width: 100%;
		height: 268rpx;
		margin: 30rpx auto 44rpx;

		.swiper {
			height: 268rpx;
		}

		.item {
			position: relative;
			display: block;
			width: 686rpx;
			height: 268rpx;
			margin: 0 auto;
			border-radius: 14rpx;
			overflow: hidden;
		}

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.tag {
			position: absolute;
			bottom: 0;
			right: 0;
			height: 34rpx;
			padding: 0 14rpx;
			line-height: 34rpx;
			color: #fff;
			background: #43a5f0;
			z-index: 10;
			border-top-left-radius: 14rpx;
		}
	}

	.main-bar {
		padding-bottom: 22rpx;
		text-align: center;
		line-height: 70rpx;
		color: #666;
		border-bottom: 1rpx solid #e6e6e6;

		.img {
			display: block;
			width: 92rpx;
			height: 92rpx;
			margin: 0 auto;
		}

		.flex-item {
			position: relative;

			.date {
				position: absolute;
				left: 60rpx;
				top: 40rpx;
				line-height: 1;
				font-size: 24rpx;
				color: #ff392d;
				transform: scale(0.8);
			}
		}

	}

	.song-list {
		padding-left: 32rpx;

		.tit-bar {
			font-size: 34rpx;
			font-weight: 600;
			line-height: 110rpx;
		}

		.more {
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin-top: 30rpx;
			margin-right: 32rpx;
			color: #333;
			font-weight: 400;
			font-size: 24rpx;
			border: 2rpx solid #e6e6e6;
			border-radius: 50rpx;
		}

		.switch-line {
			justify-content: space-between;
			color: #999;

			.flex-box {
				line-height: 110rpx;
				width: 300rpx;
			}

			.switch-item {
				font-weight: 600;

				&:first-child {
					width: 80rpx;
				}

				&:last-child {
					padding-left: 22rpx;
				}

				&.on {
					color: #333;
					font-size: 34rpx;
				}
			}
		}

		.scroll-view {
			width: 100%;
			white-space: nowrap;
		}

		.item {
			position: relative;
			display: inline-block;
			width: 218rpx;
			padding-bottom: 16rpx;
			margin-right: 16rpx;
			line-height: 34rpx;

			&:before {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 40rpx;
				z-index: 2;
				background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent);
			}

			&.video {
				width: 450rpx;
			}

			.img {
				display: block;
				width: 100%;
				height: 218rpx;
				margin-bottom: 16rpx;
				background: #eee;
				border-radius: 10rpx;
			}
		}

		.count {
			position: absolute;
			top: 0;
			right: 0;
			padding-left: 25rpx;
			line-height: 34rpx;
			color: #fff;
			font-size: 24rpx;
			z-index: 10;
			background-size: 25rpx 25rpx;
			transform: scale(0.8);
		}
	}

	.video-list {
		padding-left: 0;

		.tit-bar {
			padding-left: 32rpx;
		}

		.video-item {
			width: 686rpx;
			height: 490rpx;
			margin: 0 auto;
			background: #f8f8f8;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
		}

		.img {
			display: block;
			width: 686rpx;
			height: 390rpx;
			background: #eee;
		}

		.desc {
			padding-left: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 100rpx;
		}
	}

	/* 
				 *平台差异化处理的代码可以放在底部，这样有利于集中管理
				*/
	/* #ifdef MP-WEIXIN */
	// .banner {
	// 	margin-top: 60rpx;
	// }

	/* #endif */
</style>